<template>
	<view class="all">
		<view style="height: var(--status-bar-height);">
			<!-- app状态栏高度占位 -->
		</view>
		<view class="" style="margin-bottom: 44px;">
			<u-navbar title="机构定位" @leftClick="leftClick">
				<!-- <view class="u-nav-slot" slot="right" style="color: #868686;">
					确认
				</view> -->
			</u-navbar>
		</view>
		<view class="header">
			<view class="left">
				<view class="city" @click="toChooseCity()">
					{{CityName || "位置"}}
				</view>
				<view class="icon">
					<image style="width: 12rpx;height: 12rpx;" src="@/static/img/icon_arrow_b.png" mode=""></image>
				</view>
			</view>
			<view class="search" style="display: flex;align-items: center;" @click="toSearch">
				<u--input :customStyle=test placeholder="输入关键字搜索" v-model="keyWords" prefixIcon="search" readonly
					prefixIconStyle="font-size: 22px;color: #909399" shape="circle" border="none"></u--input>
			</view>
			<view class="searchBtn" @click="keyWordSearch()">搜索</view>
		</view>
		<view class="page-body">
			<view class="page-section page-section-gap">
				<map style="width: 100%; height: 1100rpx;" id="maps" :latitude="latitude" :longitude="longitude"
					@regionchange="regionchange" :markers="covers" @tap="taps" @markertap="anchorpointtap"
					show-location="true">
					<cover-image class="manpCenter" src="@/static/img/location3.png"></cover-image>
				</map>
			</view>
		</view>
		<view class="bottom">
			<view class="content">
				<view class="left">
					{{adressInfo}}
				</view>
				<view class="right">
					<u-button style="height: 60rpx;" text="选择" type='primary' :hairline='false'
						@click="saveLocation"></u-button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: true,
				CityName: '',
				test: {
					background: '#EEEEEE',
					height: '70rpx',
					padding: '0 0 0 10px',
				},
				keyWords: '',
				id: 0, // 使用 marker点击事件 需要填写id
				title: 'map',
				latitude: 0,
				longitude: 0,
				latitude1: 0,
				longitude1: 0,
				adressInfo: '',
				name: '',
				mapContext: '',
				covers: [
					{
						latitude: 0,
						longitude: 0,
						width: 20,
						height: 20,
						iconPath: '../../static/lg_img/btn_location.png',
						callout: { //自定义标记点上方的气泡窗口 点击有效
							content: this.name, //文本
							color: '#ffffff', //文字颜色
							fontSize: 10, //文本大小
							borderRadius: 2, //边框圆角
							bgColor: '#5398f6', //背景颜色
							display: 'ALWAYS', //常显
						},
					},
					{
						latitude: 0,
						longitude: 0,
						width: 20,
						height: 20,
						iconPath: '../../static/lg_img/btn_location.png',
						callout: { //自定义标记点上方的气泡窗口 点击有效
							content: this.name, //文本
							color: '#ffffff', //文字颜色
							fontSize: 10, //文本大小
							borderRadius: 2, //边框圆角
							bgColor: '#5398f6', //背景颜色
							display: 'ALWAYS', //常显
						},
					}
				]
			}
		},
		onLoad(option) {
			try {
				const userInfo = uni.getStorageSync('cityInfo');
				if (userInfo) {
					console.log(userInfo, 'userInfo');
					this.latitude = userInfo.lo
					this.longitude = userInfo.la
					this.name = userInfo.name
					this.CityName = userInfo.name
					this.covers.map(item => {
						item.latitude = this.latitude
						item.longitude = this.longitude
						item.callout.content = this.name
						// item.callout.bgColor='#5398f6'
						// 	// item.iconPath=`../../static/lg_img/btn_location.png`
					})
				} else {
					const myData = JSON.parse(decodeURIComponent(option.data))
					this.latitude = myData.lo
					this.longitude = myData.la
					this.name = myData.name
					this.CityName = myData.cityName
					console.log(this.name, 'this.name', myData);
					// console.log(this.latitude, this.longitude,myData.name)
					this.covers.map(item => {
						item.latitude = this.latitude
						item.longitude = this.longitude
						item.callout.content = this.name
						// item.callout.bgColor='#5398f6'
						// 	// item.iconPath=`../../static/lg_img/btn_location.png`
					})
				}
			} catch (e) {

			}
			this.getAdress(this.longitude, this.latitude)
		},
		onUnload() {
			try {
				uni.removeStorageSync('cityInfo');
			} catch (e) {
				// error
			}
		},
		methods: {
			saveLocation() {
				uni.setStorageSync('locoation',this.adressInfo)
				uni.navigateBack()
			},
			getAdress(longitude, latitude) {
				var that = this
				var point = new plus.maps.Point(longitude, latitude);
				plus.maps.Map.reverseGeocode(
					point, {},
					function(event) {
						console.log(event,'--------------');
						var address = event.address; // 转换后的地理位置
						var point = event.coord; // 转换后的坐标信息
						var coordType = event.coordType; // 转换后的坐标系类型
						console.log(address, 'address');
						var reg = /.+?(省|市|自治区|自治州|县|区)/g;
						that.adressInfo = address
						console.log(address.match(reg));
					},
					function(e) {}
				);
			},
			regionchange(e) {
				console.log('---****----', e);
				this.getCenterLanLat()
				this.getAdress(this.longitude1, this.latitude1)
			},
			getCenterLanLat() {
				this.mapContext = uni.createMapContext("maps", this);
				this.mapContext.getCenterLocation({
					type: 'gcj02',
					success: (res) => {
						let address = {
							latitude: res.latitude,
							longitude: res.longitude
						}
						// this.covers[0].longitude = address.longitude;
						// this.covers[0].latitude = address.latitude;
						console.log("地址")
						console.log(address)
						this.latitude1 = res.latitude,
							this.longitude1 = res.longitude,
							this.$emit('longLatDetail', address)
					},
					fail: (err) => {
						console.log(this.latitude)
						console.log('获取当前地图中心的经纬度2', err);
					}
				})
			},
			toChooseCity() {
				uni.redirectTo({
					url: '/pages/my/organization/chooseCity'
				})
			},
			toSearch() {
				uni.redirectTo({
					url: '/pages/my/organization/searchDetial'
				})
			},
			taps(e) {
				console.log(e, 'ppppp');

			},
			anchorpointtap(e) {
				console.log('oooooooooooo', e);
			},
			leftClick() {
				uni.navigateBack()
			},
			rightClick() {
				console.log(this.latitude,
					this.longitude, '++++++++++++++');
				// uni.navigateBack()
			},
			keyWordSearch() {
				var that = this
				uni.request({
					url: 'https://restapi.amap.com/v3/geocode/geo?parameters',
					method: 'GET',
					type: 'gcj02',
					data: {
						key: '44237e1964e1480718c9efbe5d214bed', //高德地图key
						address: that.keyWords // 详细地址
					},
					success: res => {
						// console.log(res.data.geocodes[0].location)
						const latitude = res.data.geocodes[0].location.split(",")[0];
						const longitude = res.data.geocodes[0].location.split(",")[1];
						that.latitude = latitude
						that.longitude = longitude
						console.log(this.latitude, '-------------', this.longitude);
						that.covers[0] = {
							longitude: that.latitude,
							latitude: that.longitude
						}
						// that.covers.map(item => {
						// 	item.latitude = that.latitude
						// 	item.longitude = that.longitude
						// 	// item.callout.bgColor='#5398f6'
						// 	// 	// item.iconPath=`../../static/lg_img/btn_location.png`
						// })
					}
				})
			}
		},
	}
</script>

<style lang="scss" scoped>
	.all {
		height: 100%;
		background-color: #f6f6f6;
		position: relative;

		.bottom {
			height: 300rpx;
			width: 100%;
			// background-color: aquamarine;
			position: absolute;
			bottom: 0;
			border-radius: 15rpx 15rpx 0 0;

			.content {
				padding: 10rpx 20rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.left {
					flex: 5;
				}

				.right {
					flex: 1;
				}
			}
		}
		.manpCenter {
			width: 45rpx;
			height: 43rpx;
			position: absolute;
			left: calc(50% - 24rpx);
			top: calc(50% - 77rpx); 
		}

		.header {

			padding: 0 20rpx;
			background-color: #ffffff;
			height: 100rpx;
			display: flex;
			margin: 0 auto;
			justify-content: space-between;

			.left {
				display: flex;
				line-height: 100rpx;

				.city {
					font-size: 32rpx;
					font-weight: 500;
					color: #242424;
				}

				.icon {
					margin-left: 10rpx;
					display: flex;
					justify-content: center;
					align-items: center;
				}
			}

			.searchBtn {
				font-size: 28rpx;
				font-weight: 500;
				color: #242424;
				line-height: 100rpx;
				padding-right: 24rpx;
			}
		}
	}
</style>